<!DOCTYPE html>

<html>
  <head>
    <meta charset="UTF-8" />
    <title>主轴对齐方式</title>
    <!-- 设置标题栏中标题之前的小图标 -->
    <link rel="shortcut icon" href="kfm.jpg" type="image/x-icon">
    <!-- 链接外部样式文件 -->
    <link rel="stylesheet" href="justify.css">
  </head>
  <body>
    <h3>主轴对齐方式</h3>

    <div class="wrapper">
        <p class="title">flex-flow: column-reverse nowrap; / justify-content: flex-start;</p>
        <p class="desc">主轴: 垂直从下到上 / 交叉轴: 水平从左到右 </p>
        <div class="flex-container first">
            <div class="flex-item">天</div>
            <div class="flex-item">地</div>
            <div class="flex-item">玄</div>
            <div class="flex-item">黄</div>
        </div>
    </div>

    <div class="wrapper">
        <p class="title">flex-flow: column-reverse nowrap; / justify-content: center;</p>
        <p class="desc">主轴: 垂直从下到上 / 交叉轴: 水平从左到右 </p>
        <div class="flex-container second">
            <div class="flex-item">天</div>
            <div class="flex-item">地</div>
            <div class="flex-item">玄</div>
            <div class="flex-item">黄</div>
        </div>
    </div>

    <div class="wrapper">
        <p class="title">flex-flow: column-reverse nowrap; / justify-content: flex-end;</p>
        <p class="desc">主轴: 垂直从下到上 / 交叉轴: 水平从左到右 </p>
        <div class="flex-container third">
            <div class="flex-item">天</div>
            <div class="flex-item">地</div>
            <div class="flex-item">玄</div>
            <div class="flex-item">黄</div>
        </div>
    </div>

    <div class="wrapper">
        <p class="title">flex-flow: column-reverse nowrap; / justify-content: space-between;</p>
        <p class="desc">主轴: 垂直从下到上 / 交叉轴: 水平从左到右 </p>
        <div class="flex-container fourth">
            <div class="flex-item">天</div>
            <div class="flex-item">地</div>
            <div class="flex-item">玄</div>
            <div class="flex-item">黄</div>
        </div>
    </div>

    <div class="wrapper">
        <p class="title">flex-flow: column-reverse nowrap; / justify-content: space-evenly;</p>
        <p class="desc">主轴: 垂直从下到上 / 交叉轴: 水平从左到右 </p>
        <div class="flex-container fifth">
            <div class="flex-item">天</div>
            <div class="flex-item">地</div>
            <div class="flex-item">玄</div>
            <div class="flex-item">黄</div>
        </div>
    </div>

    <div class="wrapper">
        <p class="title">flex-flow: column-reverse nowrap; / justify-content: space-around;</p>
        <p class="desc">主轴: 垂直从下到上 / 交叉轴: 水平从左到右 </p>
        <div class="flex-container sixth">
            <div class="flex-item">天</div>
            <div class="flex-item">地</div>
            <div class="flex-item">玄</div>
            <div class="flex-item">黄</div>
        </div>
    </div>

    <div class="wrapper">
        <p class="title">flex-flow: column-reverse wrap; / justify-content: space-between;</p>
        <p class="desc">主轴: 垂直从下到上 / 交叉轴: 水平从左到右 </p>
        <div class="flex-container seventh">
            <span class="flex-item">天</span>
            <span class="flex-item">地</span>
            <span class="flex-item">玄</span>
            <span class="flex-item">黄</span>
            <span class="flex-item">宇</span>
            <span class="flex-item">宙</span>
            <span class="flex-item">洪</span>
            <span class="flex-item">荒</span>
        </div>
    </div>

  </body>
</html>
